import React from "react";
import Swiper from './Swiper.jsx'
import {Button} from 'antd'
import ScrollFigure from '../components/ScrollFigure.jsx'
import '../assets/css/home.scss'

export default class Home extends React.Component {
    render() {
        return (
            <div>
                <Swiper/>
                <div className='home_content centerbox'>
                    <div className='left_nav'>
                        <div className='nav_head'>
                            产品中心
                        </div>
                        <ul className="nav_contant">
                            <li>不锈钢管</li>
                            <li>无锡316L不锈钢管</li>
                            <li>无锡310S不锈钢管</li>
                            <li>无锡不锈钢圆管</li>
                            <li>无锡薄壁不锈钢管</li>
                            <li>厚壁不锈钢管</li>
                            <li>304不锈钢工业管</li>
                            <li>不锈钢板</li>
                        </ul>
                        <div className='nav_bottom'></div>
                    </div>
                    <div className='right_content'>
                        <div className='content_title'>

                        </div>
                        <div className='content_list'>
                            <li>
                                <img src={require('../assets/image/2019083057050753.jpg')} alt="粤翔金属"/>
                                <p>专业生产销售304 316L 310S卫生级不锈钢无缝管 不锈钢管价格</p>
                            </li>
                            <li>
                                <img src={require('../assets/image/2019083057050753.jpg')} alt="粤翔金属"/>
                                <p>专业生产销售304 316L 310S卫生级不锈钢无缝管 不锈钢管价格</p>
                            </li>
                            <li>
                                <img src={require('../assets/image/2019083057050753.jpg')} alt="粤翔金属"/>
                                <p>专业生产销售304 316L 310S卫生级不锈钢无缝管 不锈钢管价格</p>
                            </li>
                            <li>
                                <img src={require('../assets/image/2019083057050753.jpg')} alt="粤翔金属"/>
                                <p>专业生产销售304 316L 310S卫生级不锈钢无缝管 不锈钢管价格</p>
                            </li>
                            <li>
                                <img src={require('../assets/image/2019083057050753.jpg')} alt="粤翔金属"/>
                                <p>专业生产销售304 316L 310S卫生级不锈钢无缝管 不锈钢管价格</p>
                            </li>
                        </div>
                    </div>
                </div>
                <div className='show_application'>
                    <div className="centerbox">
                        <div className="title">
                            <p>不锈钢材料应用于各个行业</p>
                            <p className='fu_title'>Stainless steel is widely used in various industries</p>
                        </div>
                        <ScrollFigure direction='x' children={
                            function (style) {
                                return [...new Array(8)].map((res, i) => (
                                    <div className={style.box} key={i}>
                                        <img src={require('../assets/image/2019083057050753.jpg')}
                                             alt="粤翔金属"/>
                                        <p>粤翔金属</p>
                                    </div>
                                ))
                            }
                        }>
                        </ScrollFigure>
                    </div>
                </div>
                <div className="home_banner">
                    <div className="centerbox banner_text">
                        <div className="content">
                            <div className="button">
                                <div className='button_know_more'>
                                    了解更多
                                </div>
                                <div className='button_now_learn'>
                                    立即咨询
                                </div>
                            </div>
                            <p className='text'>
                                全国服务热线
                                0510-88888896
                            </p>
                        </div>
                    </div>
                </div>
                <div className="testimonials_honor centerbox">
                    <div className="testimonials">
                        <div className="title">
                            <div className='text'>
                                客户见证<span style={{fontSize: '13px'}}>/TESTIMONIALS</span>
                            </div>
                        </div>
                        <ul className='content'>
                            {
                                [...new Array(3)].map((res, i) => (
                                    <li key={i}>
                                        <div className='content_img'>
                                            <img src={require('../assets/image/2016050264274109.jpg')}/>
                                        </div>
                                        <div className='content_text'>
                                            <div>
                                                <p className="content_title">无锡求和科技 特钢有限公司是一家值得信赖的公司</p>
                                                <p className='content_body'>
                                                    去年我们公司急着采购一批不锈钢板，就在网上找到了专业销售不锈钢板管的无锡鼎耀特钢有限公司，联系到了贾经理，经理态…
                                                </p>
                                            </div>

                                            <div className='content_button'>
                                                <Button type="primary">
                                                    点击详情
                                                </Button>
                                            </div>

                                        </div>
                                    </li>)
                                )
                            }

                        </ul>
                    </div>
                    <div className="honor">
                        <div className='title'>
                            <div className='title_text'>
                                荣誉 <span style={{fontSize: '13px'}}>/HONOURS</span>
                            </div>
                        </div>
                        <ScrollFigure direction='y' children={
                            function (style) {
                                return [...new Array(8)].map((res, i) => (
                                    <div className={style.box} key={i}>
                                        <div className='imgbox'>
                                            <img src={require('../assets/image/2016050262491945.jpg')} alt="粤翔金属"/>
                                        </div>
                                    </div>
                                ))
                            }
                        }>
                        </ScrollFigure>
                    </div>
                </div>
                <div className='company_introduction'>
                    <div className='company_body centerbox'>
                        <div className='company_about'>
                            <div>
                                <img src={require('../assets/image/gs.jpg')} alt=""/>
                            </div>
                            <div className="text">
                                <div className='title'>
                                    公司简介<span className='about'>ABOUT</span>
                                </div>
                                <div className='content'>
                                    <p className='content_title'>无锡求和科技有限公司</p>
                                    <p className='content_text'>
                                        无锡求和科技有限公司是江南地区较大的不锈钢管销售企业，我公司专业销售不锈钢工业焊管、换热器管、食品卫生级管等不锈钢管以及钛合金、高镍合金等有色金属管。
                                        产品可按国标GB、美标ASTM、日标JIS、德标DIN、欧盟EN等标准组织定制，目前产品规格为φ12～φ2500mm，壁厚0.5～45.0mm。产品广泛应用于石油、化工、造纸、电力、核电、热交换器、冷凝器、食品饮料、医药等行业或工程。
                                    </p>
                                    <Button>点击查看</Button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="product_price_news">
                    <div className='content centerbox'>
                        <div className="left_nav">
                            <div className='title'>
                                <div className='hover'>
                                    新闻动态
                                </div>
                                <div>
                                    价格行情
                                </div>
                            </div>
                            <div className='news_content'>
                                <div className='banner'>
                                    <div className='imgbox'>
                                        <img src={require('../assets/image/2017093067734809.jpg')} alt=""/>
                                    </div>
                                    <div className='text'>
                                        <p className='text_title'>2017环保压力下不锈钢管现年度大调整 棚僧多粥少</p>
                                        <p>环境保护的日趋严格对不锈钢管行业的确是压力,这将迫使不锈钢管行业,尤其是原来那些环境保护设施不齐全的企业投资建设环…</p>
                                    </div>
                                </div>
                                <ul className='news_list'>
                                    {
                                        [...new Array(12)].map((res, i) => (
                                            <li key={i}>
                                                预计全球建筑行业在2019年和2020年{i}
                                            </li>
                                        ))
                                    }
                                </ul>
                            </div>
                            <div className='market_content'>
                                <div className='banner'>
                                    <div className='imgbox'>
                                        <img src={require('../assets/image/2017093067734809.jpg')} alt=""/>
                                    </div>
                                    <div className='text'>
                                        <p className='text_title'>2017环保压力下不锈钢管现年度大调整 棚僧多粥少</p>
                                        <p>环境保护的日趋严格对不锈钢管行业的确是压力,这将迫使不锈钢管行业,尤其是原来那些环境保护设施不齐全的企业投资建设环…</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="right_nav">
                            <div className="title">
                                <div className='title_text'>
                                    产品知识
                                </div>
                            </div>
                            <ul className='content'>
                                {
                                    [...new Array(3)].map((res, i) => (
                                        <li key={i}>
                                            <p className='problem'>
                                                dn不锈钢管弱势回调的态势
                                            </p>
                                            <p className='answer'>
                                                dn不锈钢管弱势回调的态势 dn不锈钢管 dn不锈钢管作为现代工业化工等，对不锈钢性能有着高要求的领域，受到了广泛的欢…
                                            </p>
                                        </li>
                                    ))
                                }
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="friend_links">
                    <div className='centerbox'>
                        <div className='title'>
                            友情链接 <span>/ LINKS</span>
                        </div>
                        <ul className="content">
                            {
                                [...new Array(10)].map((res, i) => (
                                    <li key={i}>
                                        不锈钢板销售 <span className='line'>|</span>
                                    </li>
                                ))
                            }
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}
